<template>
<div class="myCollection">
<!--header start-->
<header class="header-con header-w-bg">
  <router-link to="/memberCenter">
    <i class="back-icon"></i>
  </router-link>
  <h1 class="header-tit">我的收藏</h1>
</header>
<!--header end-->
<!-- content start -->
<div class="search-list my-page">
  <ul class="myCollection">
    <li class="gty" v-for='(item, idx) in collection.content'>
      <a href="#" class="slide-item">
        <div class="search-list-img">
          <img :src="item.imgUrl" alt="...">
          <div class="search-list-place">{{item.deptPlaceName}}</div>
        </div>
        <div class="search-list-con">
          <h3><span>{{item.maintitle}}</span>{{item.subtitle}}</h3>
          <p class="search-list-date">团期：<span v-for='date in item.deptDates'>{{date}}&nbsp;&nbsp;</span></p>
          <p class="search-list-tip">
            <span v-for='(tag, index) in item.pdTagNames' :class='index === 0 ? "tip-zy": index === 1 ? "tip-col1 bordbox" : "tip-col2 bordbox"'>{{tag}}</span>
          </p>
          <p class="search-list-comment"><span>12.2万人出游</span><span>|</span><span>评分：{{item.score}}</span></p>
          <p class="search-list-price">￥<span>{{item.minPrice}}</span>起</p>
        </div>
        <div class="search-list-type"><i></i><span>跟团游</span></div>
      </a>
      <div class="slide-show">
        <ul>
          <li class="cancel-collection">
            <p>取消收藏</p>
          </li>
        </ul>
      </div>
    </li>
   <!--  <li class="zyx">
      <a href="" class="slide-item">
        <div class="search-list-img">
          <img src="../assets/images/mobileImages/08.png" alt="...">
          <div class="search-list-place">广州</div>
        </div>
        <div class="search-list-con">
          <h3><span>ClubMed马尔代夫卡尼岛6天4晚（2高＋2水）</span>广州往返 一价全包</h3>
          <p class="search-list-date">团期：<span>09-21、09-22、09-23、09-24</span></p>
          <p class="search-list-tip">
            <span class="tip-col1 bordbox">甜蜜侣程</span>
            <span class="tip-col2 bordbox">海滩海岛</span>
          </p>
          <p class="search-list-comment"><span>12.2万人出游</span><span>|</span><span>98%好评</span></p>
          <p class="search-list-price">￥<span>20899</span>起</p>
        </div>
        <div class="search-list-type"><i></i><span>自由行</span></div>
      </a>
      <div class="slide-show">
        <ul>
          <li class="cancel-collection">
            <p>取消收藏</p>
          </li>
        </ul>
      </div>
    </li>
    <li class="ddy">
      <a href="" class="slide-item">
        <div class="search-list-img">
          <img src="../assets/images/mobileImages/08.png" alt="...">
          <div class="search-list-place">广州</div>
        </div>
        <div class="search-list-con">
          <h3><span>ClubMed马尔代夫卡尼岛6天4晚（2高＋2水）</span>广州往返 一价全包 一价全包</h3>
          <p class="search-list-date">团期：<span>09-21、09-22、09-23、09-24</span></p>
          <p class="search-list-tip">
            <span class="tip-col1 bordbox">甜蜜侣程</span>
            <span class="tip-col2 bordbox">海滩海岛</span>
          </p>
          <p class="search-list-comment"><span>12.2万人出游</span><span>|</span><span>98%好评</span></p>
          <p class="search-list-price">￥<span>20899</span>起</p>
        </div>
        <div class="search-list-type"><i></i><span>当地游</span></div>
      </a>
      <div class="slide-show">
        <ul>
          <li class="cancel-collection">
            <p>取消收藏</p>
          </li>
        </ul>
      </div>
    </li>
    <li class="yl">
      <a href="" class="slide-item">
        <div class="search-list-img">
          <img src="../assets/images/mobileImages/08.png" alt="...">
          <div class="search-list-place">广州</div>
        </div>
        <div class="search-list-con">
          <h3><span>皇家加勒比海洋赞礼号香港-冲绳-厦门-香港5晚6天</span></h3>
          <p class="search-list-date">开航日期：<span>09-21、09-22、09-23、09-24</span></p>
          <p class="search-list-days">行程天数：<span>6天</span></p>
          <p class="search-list-comment"><span>12.2万人出游</span><span>|</span><span>98%好评</span></p>
          <p class="search-list-price">￥<span>20899</span>起</p>
        </div>
        <div class="search-list-type"><i></i><span>邮轮</span></div>
      </a>
      <div class="slide-show">
        <ul>
          <li class="cancel-collection">
            <p>取消收藏</p>
          </li>
        </ul>
      </div>
    </li>
    <li class="jd">
      <a href="" class="slide-item">
        <div class="search-list-img"><img src="../assets/images/mobileImages/08.png" alt="..."></div>
        <div class="search-list-con">
          <h3>
            <span>都会海逸酒店</span>
            <p class="search-list-eName">Novotel Phuket Vintage Park Resort</p>
          </h3>
          <p class="search-list-star">
            <i class="superstar-icon"></i>
            <i class="superstar-icon"></i>
            <i class="superstar-icon"></i>
            <i class="superstar-icon"></i>
            <i class="superstar-icon"></i>
          </p>
          <p class="search-list-comment"><span>12.2万销量</span><span>|</span><span>98%好评</span></p>
          <p class="search-list-price">￥<span>20899</span>起</p>
        </div>
        <div class="search-list-type"><i></i><span>酒店</span></div>
      </a>
      <div class="slide-show">
        <ul>
          <li class="cancel-collection">
            <p>取消收藏</p>
          </li>
        </ul>
      </div>
    </li>
    <li class="pj">
      <a href="" class="slide-item">
        <div class="search-list-img"><img src="../assets/images/mobileImages/08.png" alt="..."></div>
        <div class="search-list-con">
          <h3><span>珠海长隆海洋王国</span></h3>
          <p class="scenic-spot-level">
            <i class="a-icon"></i>
            <i class="a-icon"></i>
            <i class="a-icon"></i>
            <i class="a-icon"></i>
            <i class="a-icon"></i>
          </p>
          <div class="search-list-position">
            <div><i class="org-place-icon"></i>珠海市横琴新区富祥湾珠海长富祥湾珠海长</div>
            <span>20.1km</span></div>
          <p class="search-list-comment"><span>12.2万销量</span><span>|</span><span>98%好评</span></p>
          <p class="search-list-price">￥<span>20899</span>起</p>
        </div>
        <div class="search-list-type"><i></i><span>门票</span></div>
      </a>
      <div class="slide-show">
        <ul>
          <li class="cancel-collection">
            <p>取消收藏</p>
          </li>
        </ul>
      </div>
    </li>
    <li class="qz">
      <a href="" class="slide-item">
        <div class="search-list-img"><img src="../assets/images/mobileImages/08.png" alt="..."></div>
        <div class="search-list-con">
          <h3><span>【广之旅】美国非移民签证陆卡专用（全国领区）</span></h3>
          <p class="visa-validity">护照有效期或以签出为准｜无需面试</p>
          <p class="visa-tip">
            <span class="success-ratio"><span>成功率</span><span>100%</span></span>
            <span class="tip-zy">自營</span>
          </p>
          <p class="search-list-comment"><span>12.2万人办理</span><span>|</span><span>98%好评</span></p>
          <p class="search-list-price">￥<span>20899</span>起</p>
        </div>
        <div class="search-list-type"><i></i><span>签证</span></div>
      </a>
      <div class="slide-show">
        <ul>
          <li class="cancel-collection">
            <p>取消收藏</p>
          </li>
        </ul>
      </div>
    </li> -->
  </ul>
</div>
<!-- content end -->
</div>
</template>

<script>
  import qs from 'qs'
  import axios from 'axios'
  import common from '../../assets/js/common'
  import weui from 'weui.js'

  export default {
    data () {
      return {
        collection: {
          'resultCode': '00100000',
          'resultMsg': 'success',
          'content': [
            {
              'id': 'ff8080815d86eb83015da79210b30adf',
              'type': 'PRODUCTGROUP',
              'docId': '0F1ACAEBE82F41DDE0532429030A5D63',
              'title': '测试--【尚·休闲】华东三市、双飞4天＊慢游乌镇＊古韵苏州＊西溪湿地＊杭州入住挂牌四星＜入住乌镇 -------标题景区内豪华民宿，苏杭乌＞',
              'maintitle': '测试--【尚·休闲】华东三市、双飞4天＊慢游乌镇＊古韵苏州＊西溪湿地＊杭州入住挂牌四星',
              'subtitle': '＜入住乌镇景区内豪华民宿，苏杭乌＞',
              'pdTagNames': ['休闲'],
              'minPrice': '2699',
              'resLevel': '',
              'imgUrl': 'http://192.168.0.155/b2c-image/2016/5/18/4e07339a-f2fc-4557-af73-17a7b739f7ca_240X160.jpg',
              'score': 4.9,
              'pdtype': '100',
              'deptDates': [
                '2017-08-10',
                '2017-08-11',
                '2017-08-12',
                '2017-08-13',
                '2017-08-14',
                '2017-08-15',
                '2017-08-16',
                '2017-08-17',
                '2017-08-18',
                '2017-08-19',
                '2017-08-20',
                '2017-08-21',
                '2017-08-22',
                '2017-08-23',
                '2017-08-24',
                '2017-08-25',
                '2017-08-26',
                '2017-08-27',
                '2017-08-28',
                '2017-08-29',
                '2017-08-30',
                '2017-08-31'
              ],
              'travelDays': '4',
              'pdCompany': '广州广之旅国际旅行社股份有限公司',
              'address': '',
              'visaRate': '',
              'deptPlaceName': '广州',
              'isFreeShuttle': 0,
              'isHaoqiao': '1',
              'cityId': '',
              'coordinate': '113.282779,23.032301'
            },
            {
              'id': 'ff8080815d86eb83015da79158790ad9',
              'type': 'PRODUCTGROUP',
              'docId': '0F1ACAEBE8CF41DDE0532429030A5D63',
              'title': '测试--【典·全景】浙江、杭州、宁波、双飞4天＊普陀山＊水乡乌镇＊西溪湿地＜乌镇入住一晚＞',
              'maintitle': '测试--【典·全景】浙江、杭州、宁波、双飞4天＊普陀山＊水乡乌镇＊西溪湿地',
              'subtitle': '＜乌镇入住一晚＞',
              'pdTagNames': ['休闲'],
              'minPrice': '3199',
              'resLevel': '',
              'imgUrl': 'http://192.168.0.155/b2c-image/2016/5/31/790a3c06-41ab-47ee-ab31-f77b4b5c6be4_240X160.jpg',
              'score': 5,
              'pdtype': '100',
              'deptDates': [
                '2017-08-16',
                '2017-08-17',
                '2017-08-19',
                '2017-08-23',
                '2017-08-24',
                '2017-08-26',
                '2017-08-30',
                '2017-08-31'
              ],
              'travelDays': '4',
              'pdCompany': '广州广之旅国际旅行社股份有限公司',
              'address': '',
              'visaRate': '',
              'deptPlaceName': '广州',
              'isFreeShuttle': 0,
              'isHaoqiao': '',
              'cityId': '',
              'coordinate': '113.282779,23.032301'
            }
          ],
          accesstoken: null
        }
      }
    },
    created: function () {
      // let self = this
      let config = {
        headers: {
          'access-token': common.accesstoken,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      let userId = common.userid
      let data = qs.stringify({
        'userId': userId,
        'typeCode': 'product'
      })
      let queryUrl = common.api.memberCenter.myCollection
      let loading = weui.loading('加载中')
      axios.post(queryUrl, data, config).then(function (res) {
        if (res.data.resultMsg === 'success') {
          loading.hide()
          console.log(res.data)
        } else {
          loading.hide()
          weui.toast('请求失败')
          console.log(res.data.resultMsg)
        }
      })
    },
    methods: {
    }
  }
</script>

<style lang='scss' scoped>
.header-con {
  width: 100%;
  position: absolute;
  height: 44px;
  line-height: 44px;
  top: 0;
  left: 0;
  z-index: 9;
  display: -webkit-box;
  display: -moz-box;
  background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%);
  &:before {
    position: absolute;
  }
}

.header-tit {
  width: 100%;
  margin: 0;
  padding: 0 25%;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  display: block;
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.header-tit-font {
  color: transparent;
}

.my-header, .scores-hd {
  background: transparent;
}

.header-bg {
  background: #ffd800;
}

.header-w-bg {
  background: #fff;
  &:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    transform: scaleY(0.5);
  }
}

/*我的收藏*/

.search-list {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  padding: 88px 0 50px;
  ul {
    padding: 0;
    background-color: #fff;
  }
  li {
    padding: 16px 16px 16px 0;
    margin-left: 16px;
    position: relative;
    &:after {
      content: "";
      display: block;
      width: 100%;
      border-bottom: 1px solid #ebebeb;
      transform: scaleY(0.5);
      position: absolute;
      bottom: 0;
    }
    a {
      display: -webkit-box;
      display: -moz-box;
    }
    .search-list-img {
      width: 120px;
      height: 80px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .search-list-place {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 15px;
      padding: 0 8px 0 14px;
      border-radius: 15px 0 0 0;
      color: #fff;
      font-size: 0.9rem;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .search-list-con {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      height: 80px;
      padding-left: 8px;
      position: relative;
      h3 {
        color: #45b167;
        font-size: 1.4rem;
        line-height: 16px;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        span {
          color: #000;
        }
      }
    }
    &.jd .search-list-con h3, &.pj .search-list-con h3 {
      -webkit-line-clamp: 1;
      white-space: nowrap;
      display: block;
    }
    .search-list-con {
      .search-list-date {
        color: #7d7d7d;
        font-size: 1.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:after {
        content: "";
        display: block;
        clear: both;
      }
    }
  }
  &.my-page {
    padding-bottom: 0;
  }
}

.myCollection {
  .slide-item {
    margin: -16px -16px -16px 0;
    position: relative;
    background-color: #fff;
    z-index: 1;
    padding: 8px 16px 16px 0;
    -webkit-transform: translateX(0px);
  }
  .slide-show li {
    margin: 0;
  }
}

.search-list .myCollection li:after {
  z-index: 1;
}

.slide-show .cancel-collection {
  background-color: #ffd800;
}

.my-page {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 44px 0 50px 0;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
}

.slide-show {
  position: absolute;
  top: 0;
  right: 0;
  ul {
    padding: 0;
    overflow: hidden;
  }
  li {
    position: relative;
    float: left;
    width: 60px;height: 104px;
    padding: 0;
  }
  .feedback-btn {
    background-color: #ffd800;
    color: #434343;
  }
  .comment-btn {
    background-color: #ffb12e;
    color: #fff;
  }
  .delete-btn {
    background-color: #fe5c47;
    color: #fff;
  }
  li p {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 1.5rem;
    line-height: 16px;
    text-align: center;
  }
}

/*全部分类*/

.tab-box {
  width: 100%;
  height: 44px;
  overflow: hidden;
  position: absolute;
  top: 44px;
  z-index: 6;
  clear: both;
}

.search-list-tab {
  .tab-con {
    overflow: auto;
    height: 52px;
    position: relative;
  }
  .more-sel {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 15px 0 25px;
    height: 43px;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0.8) 90%, rgba(255, 255, 255, 0.1) 100%);
    i {
      display: block;
    }
    &:before {
      content: '';
      display: block;
      height: 100%;
      border-left: 1px solid #ebebeb;
      position: absolute;
      left: 10px;
      transform: scale(0.5);
    }
  }
  .tab-con ul {
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    &:after {
      position: absolute;
      bottom: 0;
      content: "";
      display: block;
      width: 100%;
      border-bottom: 1px solid #ebebeb;
      transform: scaleY(0.5);
    }
    li {
      float: left;
      padding: 8px 5px;
      a {
        display: block;
        padding: 0 15px;
        height: 28px;
        line-height: 28px;
        border-radius: 14px;
        text-align: center;
        font-size: 1.4rem;
        color: #242424;
      }
      &.on a {
        background-color: #ffd800;
      }
    }
  }
}

.tab-drop-down {
  display: none;
  position: absolute;
  z-index: 6;
  top: 88px;
}

.search-list-tab .tab-info {
  ul {
    padding: 16px 4px 4px;
    background-color: #fff;
    overflow: hidden;
  }
  li {
    float: left;
    width: 25%;
    padding: 0 8px;
    margin-bottom: 8px;
    a {
      display: block;
      height: 30px;
      line-height: 30px;
      border: 1px solid #ccc;
      text-align: center;
    }
    &.on a {
      background-color: #ffd800;
      border: 1px solid #ffd800;
      color: #242424;
    }
  }
}

.search-list {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  padding: 88px 0 50px;
  ul {
    padding: 0;
    background-color: #fff;
  }
  li {
    padding: 16px 16px 16px 0;
    margin-left: 16px;
    position: relative;
    &:after {
      content: "";
      display: block;
      width: 100%;
      border-bottom: 1px solid #ebebeb;
      transform: scaleY(0.5);
      position: absolute;
      bottom: 0;
    }
    a {
      display: -webkit-box;
      display: -moz-box;
    }
    .search-list-img {
      width: 120px;
      height: 80px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .search-list-place {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 15px;
      padding: 0 8px 0 14px;
      border-radius: 15px 0 0 0;
      color: #fff;
      font-size: 0.9rem;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .search-list-con {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      height: 80px;
      padding-left: 8px;
      position: relative;
      h3 {
        color: #45b167;
        font-size: 1.4rem;
        line-height: 16px;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        span {
          color: #000;
        }
      }
    }
    &.jd .search-list-con h3, &.pj .search-list-con h3 {
      -webkit-line-clamp: 1;
      white-space: nowrap;
      display: block;
    }
    .search-list-con {
      .search-list-date {
        color: #7d7d7d;
        font-size: 1.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:after {
        content: "";
        display: block;
        clear: both;
      }
    }
  }
}

.no-more {
  opacity: 0;
  position: relative;
  height: 50px;
  line-height: 50px;
  color: #ccc;
  font-size: 1.2rem;
  text-align: center;
  background-color: #f5f5f5;
  margin-top: -1px;
}

.no-more-show {
  opacity: 1;
}

.search-list-tip {
  margin: -4px 0 0;
  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    font-size: 0.9rem;
    padding: 0 5px;
    &:before {
      border-radius: 14px;
    }
  }
  .tip-zy {
    background-color: #fe5c47;
    color: #fff;
    border-radius: 7px;
  }
  span {
    &.tip-col1 {
      color: #f9355c;
      &:before {
        border: 1px solid #f9355c;
      }
    }
    &.tip-col2 {
      color: #00a2e6;
      &:before {
        border: 1px solid #00a2e6;
      }
    }
    &.tip-col3 {
      color: #ff9b1f;
      &:before {
        border: 1px solid #ff9b1f;
      }
    }
    &.tip-col4 {
      color: #595fd0;
      &:before {
        border: 1px solid #595fd0;
      }
    }
  }
}

.search-list-position {
  display: -webkit-box;
  display: -moz-box;
  font-size: 1.1rem;
  margin-top: -3px;
  div {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    color: #707070;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  span {
    display: inline-block;
    width: 50px;
    color: #7d7d7d;
    text-align: right;
    margin-top: 3px;
  }
  i {
    vertical-align: -3px;
  }
}

.search-list-comment {
  font-size: 0.9rem;
  color: #7d7d7d;
  position: absolute;
  bottom: -4px;
  span:nth-child(2) {
    padding: 0 3px;
    font-style: normal;
  }
  .pro-assess {
    color: #fe5c47;
    font-size: 1rem;
    em {
      font-size: 1.4rem;
      font-style: normal;
    }
  }
}

@media only screen and (min-width: 320px) {
  .search-list-tip span:not(:first-child), .search-list-comment span:not(:last-child) {
    display: none;
  }
}

@media only screen and (min-width: 375px) {
  .search-list-tip span:not(:first-child), .search-list-comment span:not(:last-child) {
    display: inline-block;
  }
}

.search-list-price {
  position: absolute;
  bottom: -8px;
  right: 0;
  color: #ff8c00;
  font-size: 1rem;
  span {
    font-size: 2rem;
  }
}

.search-list-type {
  position: absolute;
  top: 0;
  left: -16px;
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-top: 25px solid #fff;
    border-right: 25px solid transparent;
  }
  i {
    position: absolute;
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
  }
  span {
    position: absolute;
    top: 13px;
    left: -7px;
    display: block;
    width: 50px;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
  }
}

.search-list {
  .gty .search-list-type i {
    border-top: 50px solid #7dcf5b;
  }
  .zyx .search-list-type i {
    border-top: 50px solid #ffbc3e;
  }
  .ddy .search-list-type i {
    border-top: 50px solid #f7664c;
  }
  .yl .search-list-type i {
    border-top: 50px solid #14c7fd;
  }
  .jd .search-list-type i {
    border-top: 50px solid #7c91de;
  }
  .pj .search-list-type i {
    border-top: 50px solid #48d2d0;
  }
  .qz .search-list-type i {
    border-top: 50px solid #d3a86d;
  }
}
</style>
